{% load static %}
<nav class="cool-yun-navbar">
    <div class="nav-container">
        <!-- 区域1：品牌+产品 -->
        <div class="nav-section brand-section">
            <img src="{% static 'images/cool-logo.svg' %}" class="brand-logo" alt="CoolYunTest">
            {#            <div class="dropdown product-selector">#}
            {#                <button class="btn dropdown-toggle"#}
            {#                        type="button"#}
            {#                        id="productDropdown"#}
            {#                        data-bs-toggle="dropdown"#}
            {#                        aria-expanded="false">#}
            {#                    Android App Demo#}
            {#                </button>#}
            {#                <ul class="dropdown-menu" aria-labelledby="productDropdown">#}
            {#                    <li><a class="dropdown-item" href="#">iOS App Demo</a></li>#}
            {#                    <li><a class="dropdown-item" href="#">Web App Demo</a></li>#}
            {#                </ul>#}
            {#            </div>#}

            <div class="dropdown product-selector">
                <button class="btn dropdown-toggle"
                        type="button"
                        id="productDropdown"
                        data-bs-toggle="dropdown"
                        aria-expanded="false">
                    <!-- 默认显示产品 -->
                    Loading Products...
                </button>
                <ul class="dropdown-menu" aria-labelledby="productDropdown">
                    <!-- 动态生成产品列表 -->
                </ul>
            </div>
        </div>

        <!-- 区域2：功能菜单 -->
        <div class="nav-section menu-section">
            <ul class="nav-links">
                <li class="nav-item active">
                    <a class="dropdown-item" href="{% url 'UserProducts' %}">项目</a>
                </li>
                <li class="nav-item">
                    <a class="dropdown-item" href="{% url 'productsDashboard' %}">仪表盘</a>
                </li>

                <li class="nav-item">
                    <a class="dropdown-item" href="{% url 'CasesHome' %}">用例</a>
                </li>
                <li class="nav-item">测试计划</li>
                <li class="nav-item">任务管理</li>
                <li class="nav-item">数据分析</li>
                <li class="nav-item">项目配置</li>
                <li class="nav-item">AI</li>
            </ul>
        </div>

        <!-- 区域3：工具区 -->
        <div class="nav-section tool-section">
            <!-- 搜索框 -->
            <div class="search-box">
                <i class="fas fa-camera"></i>
                <label>
                    <input type="text" placeholder="搜索用例/任务">
                </label>
                <i class="fas fa-search"></i>
            </div>
            <!-- 工具栏 -->
            <div class="tool-buttons">
                <button class="tool-btn">
                    <i class="fas fa-download"></i>
                </button>
                <button class="tool-btn">
                    <i class="fas fa-question-circle"></i>
                </button>

            </div>

            <!-- 用户面板 -->
            <div class="dropdown user-panel">
                <button class="user-trigger"
                        id="userDropdown"
                        data-bs-toggle="dropdown"
                        aria-expanded="false">
                    <span class="avatar-circle">
                        <i class="fas fa-user"></i>
                    </span>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li class="user-info">
                        <div class="avatar-circle">
                            <i class="fas fa-user"></i>
                        </div>
                        <span class="username">test</span>
                    </li>
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                    <li>
                        <button class="dropdown-item logout-btn">
                            <i class="fas fa-sign-out-alt me-2"></i>
                            退出登录
                        </button>
                    </li>
                </ul>
            </div>

        </div>
    </div>
</nav>